<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <input type="checkbox" class="checkAll">

    <br>

    <input type="checkbox" class="checkOne">
    <input type="checkbox" class="checkOne">
    <input type="checkbox" class="checkOne">
    <input type="checkbox" class="checkOne">


    <script>

        // 全选

        var oAll = document.querySelector('.checkAll');
        var oOnes = document.querySelectorAll('.checkOne');

        // 给all绑定事件
        //    all如果是选中的，那么所有的ones都true

        oAll.onclick = function () {
            // var v = this.checked;
            // console.log(v);   // true / false 
            // if (v) {
            //     for (var i = 0; i < oOnes.length; i++) {
            //         oOnes[i].checked = true;
            //     }
            // } else {
            //     for (var i = 0; i < oOnes.length; i++) {
            //         oOnes[i].checked = false;
            //     }
            // }



            for (var i = 0; i < oOnes.length; i++) {
                oOnes[i].checked = oAll.checked;
            }
        }






        // 反向判断全选

        // 给所有的单选绑定事件
        // for (var i = 0; i < oOnes.length; i++) {
        //     oOnes[i].onclick = function () {
        //         // 判断所有的单选是否都被选中
        //         if (oOnes[0].checked && oOnes[1].checked && oOnes[2].checked && oOnes[3].checked) {
        //             oAll.checked = true;
        //         }
        //         else {
        //             oAll.checked = false;
        //         }
        //     }
        // }


        for (var i = 0; i < oOnes.length; i++) {
            oOnes[i].onclick = function () {
                // 判断所有的单选是否都被选中
                for (var j = 0; j < oOnes.length; j++) {
                    // 判断没有选中
                    if (!oOnes[j].checked) {
                        break;
                    }
                }

                // 判断循环是否正常结束   j === oOnes.length
                // if (j === oOnes.length) {
                //     oAll.checked = true;
                // } else {
                //     oAll.checked = false;
                // }

                // oAll.checked = j === oOnes.length ? true : false ;
                oAll.checked = j === oOnes.length;
            }
        }

        // 方法二 ： 假设法  假设都选中了
        // for (var i = 0; i < oOnes.length; i++) {
        //     oOnes[i].onclick = function () {
        //         var flag = true;
        //         // 判断所有的单选是否都被选中
        //         for (var j = 0; j < oOnes.length; j++) {
        //             // 判断没有选中
        //             if (!oOnes[j].checked) {
        //                 flag = false;
        //                 break;
        //             }
        //         }

        //         oAll.checked = flag;

        //     }
        // }







    </script>

</body>

</html>